/**
 *
 * Created by huotaol on 2017/4/26.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {ListView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
import Button from "../components/Button";
import CustomStyle from "../../common/style/CustomStyle";
import {connect} from "react-redux";
import Util from "../main/Util";
import * as AreaConstant from "../constant/Area";

const DATA_SOURCE = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
class AreaSelect extends Component {
    static propTypes = {
        onPress: PropTypes.func,
        selectArea: PropTypes.object,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            selectArea: this.props.selectArea,
        };
        this.renderItem = this.renderItem.bind(this);
    }

    componentDidMount() {
    }

    onPress(item) {
        this.props.onPress(item);
        this._saveData(item);
    }

    render() {
        const marginTop = CustomStyle.headerHeight;
        return (
            <TouchableWithoutFeedback >
                <View
                    style={{marginTop: marginTop, backgroundColor: 'white'}}>
                    <ListView
                        dataSource={DATA_SOURCE.cloneWithRows(this.props.areaList)}
                        renderRow={this.renderItem}
                        contentContainerStyle={[CustomStyle.contentViewStyle]}
                    />
                </View>
            </TouchableWithoutFeedback>
        );
    }


    renderItem(item) {
        const isSelect = this.state.selectArea && this.state.selectArea.id === item.id;
        return (
            <View style={[styles.itemStyle]}>
                <Button
                    containerStyle={[
                        {
                            borderRadius: CustomStyle.getActualSizeInHorizontal(4),
                            width: CustomStyle.getActualSizeInHorizontal(180),
                            height: CustomStyle.getActualSizeInVertical(60),
                            justifyContent: 'center',
                            alignItems: 'center',
                        },
                        isSelect
                            ? {backgroundColor: '#FFC000'}
                            : {backgroundColor: '#f6f6f6'}
                    ]}
                    style={[
                        CustomStyle.baseText,
                        isSelect ? {color: '#fcfcfc'} : {color: 'black'}
                    ]}
                    text={item.name}
                    onPress={() => this.onPress(item)}
                />
            </View>
        );
    }

    _saveData(area) {
        Util.saveDataSimple(AreaConstant.SELECTED_AREA, area);
    }

}

const styles = StyleSheet.create({

    contentViewStyle: {
        // 主轴方向
        flexDirection: 'row',
        // 换行
        flexWrap: 'wrap'
    },

    itemStyle: {
        // 对齐方式
        alignItems: 'center',
        justifyContent: 'center',
        // 尺寸
        width: CustomStyle.screenWidth / 3,
        height: CustomStyle.getActualSizeInVertical(120),
    },

    itemImageStyle: {
        // 尺寸
        width: 60,
        height: 60,
        // 间距
        marginBottom: 5
    }
});

const mapStateToProps = (state) => {
    const {areaList} = state;
    return {
        areaList: areaList.data,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

export default connect(mapStateToProps, mapDispatchToProps)(AreaSelect);